<template>
  <div class="mt-3">
    <a-card :title="t['列表']" :body-style="{ padding: 0 }">
      <ul ref="ulRef">
        <li class="flex justify-between">
          <div>{{ t["模板名称"] }}</div>
        </li>
        <li
          v-for="item in componentList"
          :key="item.id"
          :class="{ active: currentComponent?.id === item.id }"
          @click="selectItem(item)"
        >
          <div class="flex justify-between items-center">
            <span> {{ item.name }}-{{ item.z }} </span>
            <div class="delete" @click="deleteComponent">
              <IconClose />
            </div>
          </div>
        </li>
      </ul>

      <a-empty v-if="componentList.length === 0" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { IconClose } from "@arco-design/web-vue/es/icon";

import { deleteComponent } from "../../data/actions";
import { componentList, currentComponent } from "../../data/data";
import { DragBox } from "../../data/types";

const t = translate("公共模块");
const selectItem = (item: DragBox) => {
  currentComponent.value = item;
};
const ulRef = ref();
</script>

<style lang="scss" scoped>
li {
  line-height: 24px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid transparent;
  &:hover {
    background: #f8f8f8;
    .delete {
      opacity: 1;
    }
  }
}
.active {
  border: 1px solid var(--primary);
}
.delete {
  opacity: 0;
}
</style>
